<template>
	<view class="micro">
		<view class="circle first"></view>
		<view class="circle second" :class="[play?'play':'']"></view>
		<view class="circle third" :class="[play?'play':'']"></view>
	</view>
</template>

<script>
	export default{
		props:{
			play:{
				type:Boolean,
				default:false
			}
		}
	}
</script>


<style lang="scss" scoped>
	$baseColor:#000;
	.micro{
		width:40rpx;
		height:40rpx;
		position: relative;
		.circle{
			position:absolute;
			box-sizing:border-box;
			border-radius:50%;
		}
		.first{
			width:20%;
			height:20%;
			left:41%;
			top:40%;
			background: $baseColor;
		}
		.second{
			width:58%;
			height:58%;
			left:21%;
			top:21%;
			border: 4rpx solid $baseColor;
			&.play{
				animation: fadeInOut 1s infinite 0.2s;
			}
		}
		.third{
			width:99%;
			height:99%;
			left:0;
			top:0;
			border: 4rpx solid $baseColor;
			&.play{
				animation: fadeInOut 1s  infinite .4s;
			}
		}
	   font-size: 28rpx;
	   clip-path: polygon(50% 50%, 100% 0, 100% 100%);
	}
	
	@keyframes fadeInOut {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
</style>